<template>
  <div>
    <div>
      <div>
        <div>当日数据:</div>
        
      </div>
      <div></div>
    </div>
    <div class="line1">
      <div id="line1" class="" style="width: 80%; height: 450px"></div>
    </div>
  </div>
</template>

<script>
//vuecli脚手架中也支持 node中的模块化  common 规范   一般写代码用ES6的模块化
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/bar");
require("echarts/lib/chart/line");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
require("echarts/lib/component/grid");
require("echarts/lib/component/toolbox");
require("echarts/lib/component/markPoint");


export default {
  name: "Echarts",
  data() {
    return {
      arr: [
        "2021-06-03",
        "2021-06-04",
        "2021-06-05",
        "2021-06-06",
        "2021-06-07",
        "2021-06-08",
        "2021-06-09",
      ],
      arr2: [
        [24, 22, 15, 12, 28, 13, 5],
        [13, 43, 17, 0, 0, 3, 0],
        [45, 38, 48, 20, 37, 32, 5],
      ],
    };
  },
  methods: {
    initData() {
      const colors = ["#5793f3", "#675bba", "#d14a61"];
      const option = {
        color: colors,
        title: {
          text: "走势图",
          subtext: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["新注册用户", "新增订单", "新增管理员"],
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["bar", "line"] },
            restore: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // data: ["2021-06-03","2021-06-04","2021-06-05","2021-06-06","2021-06-07","2021-06-08","2021-06-09"],
          data: this.arr,
        },
        yAxis: [
          {
            type: "value",
            name: "用户",
            min: 0,
            max: 200,
            position: "left",
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "订单",
            min: 0,
            max: 200,
            position: "right",
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "新注册用户",
            type: "line",
            // data:[24,22,15,12,28,13,5],
            data: this.arr2[0],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
          {
            name: "新增订单",
            type: "line",
            // data:[13,43,17,0,0,3,0],
            data: this.arr2[1],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
          {
            name: "新增管理员",
            type: "line",
            // data:[45,38,48,20,37,32,5],
            data: this.arr2[2],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("line1"));
    this.initData();
  },
};
// 选项具体参数参考
// https://www.echartsjs.com/zh/option.html#
</script>

<style lang="scss" scoped>
.line1 {
  padding-top: 100px;
  display: flex;
  justify-content: center;
  background-color: white;
}
</style>